<template>
    <div class="page">
        <div class="headers">
            <div class="headers-wrap">
                <div class="img">
                    <div>全场包邮</div>
                </div>
                <div class="img img-wrap">
                    <div>七日无忧退货</div>
                </div>
            </div>
            <div class="content-img">
                <div>
                    <span class="img-price">50</span>
                    <span class="img-font">限单首用，除拼团</span>
                    <span class="img-time">01:55:02后作废</span>
                    <p class="img-time img-text">10000款特权金标识商品首单使用</p>
                </div>
            </div>
        </div>
        <!-- 划屏 -->
        <div class="header">
            <div id="scropt" class="header-wrapper">
                <div v-for="(data, index) in titleList" 
                :key="index" @click="handTitle($event,index)" :class="handIndex === index ? 'active' : ''" class="header-wrap">{{ data }}</div>
            </div>
        </div>
        <div class="con">
            <div class="con-wrap" v-for="(data, index) in titleList" 
                :key="index" :style="{ left: index * 100 + '%' }">
                <div class="con-wrapper" :style="{ left: '-' + (handIndex * 100) + '%' }">
                    <template v-if="index === 0">
                        <div class="content">
                           <img src="@/assets/images/posters.jpg" alt="">
                           <div class="content-flex">
                               <div class="content-top">
                                    <div class="content-name">新国际4孔插线板</div>
                                    <div class="content-wrap">
                                        <div class="handpick">精选</div>
                                        <div class="handpick-font">NOATEK制造商</div>
                                    </div>
                                </div>
                                <div class="content-bottom">
                                    <div class="content-left">
                                        <span class="original">原价:￥<span class="price">45</span></span>
                                    </div>
                                    <div class="frame-flex">
                                        <div class="frame">
                                            <span>特权金在减2元</span>
                                            <div class="triangle"></div>
                                        </div>
                                        <div class="content-but">
                                            <span>立即参团 ￥40</span>
                                        </div>
                                    </div>
                                </div>
                           </div>
                           
                        </div>

                        <div class="content">
                           <img src="@/assets/images/posters.jpg" alt="">
                           <div class="content-flex">
                               <div class="content-top">
                                    <div class="content-name">新国际4孔插线板</div>
                                    <div class="content-wrap">
                                        <div class="handpick">精选</div>
                                        <div class="handpick-font">NOATEK制造商</div>
                                    </div>
                                </div>
                                <div class="content-bottom">
                                    <div class="content-left">
                                        <span class="original">原价:￥<span class="price">45</span></span>
                                    </div>
                                    <div class="frame-flex">
                                        <div class="frame">
                                            <span>特权金在减2元</span>
                                            <div class="triangle"></div>
                                        </div>
                                        <div class="content-but">
                                            <span>立即参团 ￥40</span>
                                        </div>
                                    </div>
                                </div>
                           </div>
                           
                        </div>
                    </template>
                    <template v-if="index === 1">
                        <div class="content">抱歉，暂时无立减金可使用</div>
                    </template>
                </div>    
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                handIndex: 0,
                titleList: ['未使用', '已使用', '为你推荐', '康一屋子', '为你推荐', '康一屋子', '为你推荐', '康一屋子', '为你推荐', '康一屋子']
            }
        },
        mounted() {
            // console.log(this.$route.params.id)
        },
        methods: {
            handTitle(e,index) {
                document.querySelector('#scropt').scrollTo(e.target.offsetLeft / 2, 0);
                this.handIndex = index;
            }
        }
    }
</script>

<style scoped>
    .page {
        min-height: 100vh;
    }
    .headers {
        width: 90%;
        margin: 10px auto;
        height: 22vh;
    }
    .headers-wrap {
        display: flex;
        justify-content: space-between;
    }

    .img {
        width: 48%;
        height: 50px;
        background: url('../../assets/images/1-2.png') no-repeat;
        background-size: 100%;
        display: flex;
        align-items: center;
    }

    .img-wrap {
        background: url('../../assets/images/1-1.png') no-repeat;
        background-size: 100%;
    }

    .img div {
        color: rgb(255,232,212);
        margin-left: 10px;
    }

    .content-img {
        width: 100%;
        height: 80px;
        background: url("../../assets/images/1.1.png") no-repeat;
        background-size: 100%;
        position: relative;
        margin-bottom: 10px;
        margin-top: 10px;
    }
    .img-price {
        position: absolute;
        left: 34px;
        font-size: 30px;
        color: #fff;
        top: calc(50% + 3px);
        transform: translateY(-50%);
    }

    .img-font {
        position: absolute;
        color: rgb(255,234,242);
        left: 86px;
        top: 7px;
        font-size: 14px;
    }

    .img-time {
        position: absolute;
        color: rgb(255,234,242);
        left: 86px;
        top: 25px;
        font-size: 12px;
    }

    .img-text {
        width: 120px;
        top: 42px;
    }

    .header {
        width: 100%;
        background: #fff;
        height: 7vh;
    }

    .header-wrapper {
        display: flex;
        width: 95%;
        margin: 0 auto;
        /* justify-content: space-between; */
        align-items: center;
        height: 100%;
        color: rgb(88,88,88);
        overflow-x: auto;
    }

    .header-wrap {
        height: 100%;
        position: relative;
        display: flex;
        align-items: center;
        min-width: 60px;
        margin-right: 5px;
        justify-content: center;
    }

    .active::after {
        content: "";
        width: 100%;
        height: 2px;
        background: rgb(121,64,137);
        position: absolute;
        bottom: 0;
        left: 0px;
    }

    .active {
        color: rgb(121,64,137);
    }

    .con {
        padding: 10px;
        position: relative;
        overflow: hidden;
        overflow-y: auto;
        min-height: 68vh;
    }

    .con-wrap {
        position: absolute;
        top: 0;
        transition: all .5s;
        width: 100%;
    }

    .con-wrapper {
        position: relative;
        width: 100%;
        transition: all .3s;
        padding: 10px;
    }

    .content {
        width: 100%;
        margin: 0 auto;
        height: auto;
        background: #fff;
        border-radius: 6px;
        /* margin-top: -50px; */
        /* padding: 10px; */
        margin-bottom: 10px;
        display: flex;
        /* align-items: center; */
        /* justify-content: center; */
        /* color: rgb(161,161,161); */
        border-bottom: 1px solid rgb(244,244,244);
        padding-bottom: 20px;
    }

    .content-header {
        display: flex;
        justify-content: space-between;
        margin-bottom: 10px;
    }

    .content-price {
        font-weight: 700;
    }

    .content-info {
        font-size: 12px;
        color: rgb(161,161,161);
    }

    .content-wrap {
        margin-top: 0;
    }

    .content-position {
        width: 100%;
        height: 80px;
        position: relative;;
    }

    .content img {
        width: 40%;
        height: 140px;
        margin-right: 5px;
    }

    .content-wrapper {
        width: 100%;
        height: 80px;
        background: rgba(0,0,0,.6);
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .content-wrapper p {
        color: #ffffff;
        font-size: 12px;
        font-weight: 700;
        margin-bottom: 5px;
    }

    .content-con {
        border: 1px solid #ffffff;
        color:#fff;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50px;
        padding: 2px 5px;
        font-size: 12px;
        font-weight: 700;
    }
    .content-img {
        width: 100%;
        height: 80px;
        background: url("../../assets/images/1.1.png") no-repeat;
        background-size: 100%;
        position: relative;
    }
    .img-price {
        position: absolute;
        left: 34px;
        font-size: 30px;
        color: #fff;
        top: calc(50% + 3px);
        transform: translateY(-50%);
    }

    .img-font {
        position: absolute;
        color: rgb(255,234,242);
        left: 86px;
        top: 7px;
        font-size: 14px;
    }

    .img-time {
        position: absolute;
        color: rgb(255,234,242);
        left: 86px;
        top: 25px;
        font-size: 12px;
    }

    .img-text {
        width: 120px;
        top: 42px;
    }

    .content-name {
        font-size: 15px;
        margin-bottom: 10px;
    }

    .content-wrap {
        display: flex;
        align-items: center;
    }

    .handpick {
        font-size: 11px;
        background: rgb(167,127,213);
        color: #fff;
        border-radius: 2px;
        width: 30px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-right: 10px;
        height: 16px;
    }

    .handpick-font {
        color: rgb(171,153,122);
    }

    .content-flex {
        display: flex;
        flex-direction: column;
        width: 60%;
        
    }

    .content-bottom {
        display: flex;
        align-items: flex-end;
        height: 100%;
    }

    .original {
        font-size: 12px;
        color: rgb(226,161,55);
    }

    .price {
        font-size: 16px;
        font-weight: 700;
    }

    .content-bottom {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .content-but {
        padding: 8px 15px;
        background: rgb(156,102,192);
        color: #fff;
        font-size: 12px;
    }

    .frame {
        min-width: 70px;
        height: 20px;
        border: 1px solid rgb(179,82,102);
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 5px;
        position: relative;
    }

    .frame-flex {
        display: flex;
        /* justify-content: center; */
        flex-direction: column ;
        align-items: center;
    }

    .frame span {
        color: rgb(179,82,102);
        font-size: 12px;
        z-index: 2;
    }

    .triangle {
        width: 7px;
        height: 7px;
        background: #fff;
        border-bottom: 1px solid rgb(179,82,102);
        border-right: 1px solid rgb(179,82,102);
        position: absolute;
        bottom: -4px;
        transform: rotate(45deg);
    }
</style>